<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>公司物料类型表</title>
</head>

<body>
  <div id="app" v-loading.fullscreen.lock="loading">
    <div class="companyMaterialTable">
      <el-container style="height:100%;">
        <!-- 侧边容器 添加/修改物料 -->
        <el-aside class="companyMaterialUpdate" width="35%">
          <company-material-type-form type="update" :company-material-type="updateCompanyMaterial" @update="updateMaterialType"></company-material-type-form>
        </el-aside>
        <!-- 主要内容 显示物料 -->
        <el-main class="companyMaterialQuery" width="65%">
          <div class="companyMaterialQueryForm" style="margin-bottom: 10px;">
            <el-button type="primary" size="medium" @click="showCopmanyMaterialAddForm">添加物料类型</el-button>
            <el-button type="primary" size="medium" @click="showCopmanyMaterialQuery">查询条件</el-button>
          </div>
          <div class="companyMaterialTableDiv">
            <el-table fit stripe border :data="companyMaterialTypeDataList" style="width: 100%" height="parent" @row-click="getCompanyMaterialDetail">
              <el-table-column :resizable="false" prop="materialType" label="物料类型" :auto-width="true" min-width="70px"></el-table-column>
<!--               <el-table-column :resizable="false" prop="isReadColorText" label="是否读取颜色" min-width="110px"></el-table-column>
 -->              <el-table-column :resizable="false" prop="isSelfAddedText" label="是否为公司自己添加" min-width="140px"></el-table-column>
              <el-table-column :resizable="false" prop="defaultWarehouseText" label="仓位" :auto-width="true" min-width="60px"></el-table-column>
              <el-table-column :resizable="false" prop="createOrderIsShowText" label="制单页面是否显示" min-width="130px"></el-table-column>
              <el-table-column :resizable="false" prop="statusText" label="状态" min-width="50px" align="center"></el-table-column>
            </el-table>
          </div>
          <div style="margin-top:10px;text-align:right;" v-if="pagination.totalCount!==0">
            <el-pagination background :page-size="pagination.pageSize" :total="pagination.totalCount"
              :current-page.sync="pagination.currentPage" @current-change="pageChange">
            </el-pagination>
          </div>
        </el-main>
      </el-container>

      <el-dialog title="添加物料类型" :close-on-press-escape="false" :close-on-click-modal="false" :visible.sync="isShowCopmanyMaterialAddForm"
        top="5vh">
        <div style="height:calc(80vh - 54px);overflow:auto">
          <company-material-type-form v-if="isShowCopmanyMaterialAddForm" :company-material-type="addCompanyMaterial"
            @add="addMaterialType">
          </company-material-type-form>
        </div>
      </el-dialog>

      <el-dialog title="物料查询条件" :visible.sync="isShowMaterialQuery" width="100%" top="0px" :show-close="false">
        <el-form :model="search" :inline="true" label-width="140px">
          <el-form-item label="状态">
            <el-select v-model="search.status" clearable style="width:140px">
              <el-option label="使用" :value="1"></el-option>
              <el-option label="禁用" :value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="物料类型">
            <el-select v-model="search.materialType" clearable filterable style="width:140px">
              <el-option v-for="item in materialTypeList" :key="item" :label="item" :value="item">
              </el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="是否读取颜色">
            <el-select v-model="search.isReadColor" clearable style="width:140px">
              <el-option label="是" :value="1"></el-option>
              <el-option label="否" :value="2"></el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item label="是否为公司自己添加">
            <el-select v-model="search.isSelfAdded" clearable style="width:140px">
              <el-option label="是" :value="1"></el-option>
              <el-option label="否" :value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="仓位">
            <el-select v-model="search.defaultWarehouse" clearable style="width:140px">
              <el-option label="原材料仓" :value="1"></el-option>
              <el-option label="辅料仓" :value="2"></el-option>
              <el-option label="信息备注仓" :value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-button type="primary" @click="searchData">查询物料类型</el-button>
        </el-form>
      </el-dialog>
    </div>
  </div>
</body>

<script src="../../myJs/importFile.js"></script>
<script>
  importFile([], [
    '/vueSystem/js/checkVaildUtil.js',
    '/vueSystem/js/storageUtil.js',
    '/vueSystem/models/baseModel.js'
  ]);
</script>
<script src="../models/companyMaterialTypeModel.js"></script>
<script src="./companyMaterialTypeForm.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    data: function () {
      // 搜索条件
      var search = {
        materialType: '',
        isReadColor: '',
        isSelfAdded: '',
        status: '',
        defaultWarehouse: ''
      };
      return {
        loading: false,
        moment: moment,
        //是否显示添加物料dialog
        isShowCopmanyMaterialAddForm: false,
        //是否显示查询物料类型dialog
        isShowMaterialQuery: false,
        //物料信息
        companyMaterialTypeDataList: [],
        //物料类型
        materialTypeList: [],
        //修改时的对象
        updateCompanyMaterial: new CompanyMaterialType(),
        //添加时对象
        addCompanyMaterial: new CompanyMaterialType(),
        search: _.cloneDeep(search),
        oldSearch: _.cloneDeep(search),
        pagination: {
          currentPage: 1,
          totalCount: 0,
          pageSize: 13
        }
      };
    },
    created: function () {
      var self = this;
      this.loading = true;
      this.initSelectVal().then(function (res) {
        self.setCompanyMaterialDataList();
      }).catch(function (error) {
        self.loading = false;
      });
    },
    methods: {
      //初始化下拉
      initSelectVal: function () {
        var promiseList = [
          this.setMaterialTypeList()
        ];
        return Promise.all(promiseList).then(function (res) {
          return res;
        });
      },
      //显示添加物料dialog
      showCopmanyMaterialAddForm: function (data) {
        this.addCompanyMaterial = new CompanyMaterialType();
        this.isShowCopmanyMaterialAddForm = true;
      },
      //显示查询物料类型的dialog
      showCopmanyMaterialQuery: function () {
        this.isShowMaterialQuery = true;
      },
      //查询
      searchData: function () {
        this.isShowMaterialQuery = false;
        this.setCompanyMaterialDataList(true);
      },
      //点击页面查询
      pageChange: function () {
        this.setCompanyMaterialDataList();
      },
      //获取物料信息
      setCompanyMaterialDataList: function (isSearch) {
        if (!isSearch) {
          this.search = _.cloneDeep(this.oldSearch);
        } else {
          this.pagination.currentPage = 1;
        }
        var search = this.search;
        var pagination = this.pagination;
        var currentPage = pagination.currentPage;
        var pageSize = pagination.pageSize;
        var start = (currentPage - 1) * pageSize;
        var postData = {
          start: start,
          length: pageSize
        };
        if (search.materialType !== '') {
          postData.materialType = search.materialType
        }
        if (search.status !== '') {
          postData.status = search.status
        }
        if (search.isReadColor !== '') {
          postData.isReadColor = search.isReadColor
        }
        if (search.isSelfAdded !== '') {
          postData.isSelfAdded = search.isSelfAdded
        }
        if (search.defaultWarehouse !== '') {
          postData.defaultWarehouse = search.defaultWarehouse
        }
        this.loading = true;
        var self = this;
        return ajaxRequest("companyMaterialType/getCompanyMaterialTypeListByPage", postData, false).then(
          function (res) {
            if (isSearch) {
              self.oldSearch = _.cloneDeep(self.search);
            }
            var dataList = res.returnData;
            for (var i = 0; i < dataList.length; i++) {
              var data = dataList[i];
              if (data.isReadColor === null || data.isReadColor === 2) {
                data.isReadColorText = '不读取';
              } else {
                data.isReadColorText = '读取';
              }
              if (data.isSelfAdded === 1) {
                data.isSelfAddedText = '是'
              } else {
                data.isSelfAddedText = '否'
              }
              if (data.status === 1) {
                data.statusText = '使用'
              } else {
                data.statusText = '禁用'
              }
              if (data.defaultWarehouse === 1) {
                data.defaultWarehouseText = '原材料仓';
              } else if (data.defaultWarehouse === 2) {
                data.defaultWarehouseText = '辅料仓';
              } else if (data.defaultWarehouse === 3) {
                data.defaultWarehouseText = '信息备注仓';
              }
              if (data.createOrderIsShow === 1) {
                data.createOrderIsShowText = '是';
              } else {
                data.createOrderIsShowText = '否';
              }
            }
            self.companyMaterialTypeDataList = res.returnData;
            self.pagination.totalCount = res.iTotalRecords;
            self.loading = false;
            return self.companyMaterialTypeDataList;
          }).catch(function (error) {
          self.loading = false;
          return [];
        });
      },
      //行点击
      getCompanyMaterialDetail: function (row) {
        this.updateCompanyMaterial = new CompanyMaterialType(row);
      },
      //新增物料类型后的处理
      addMaterialType: function () {
        this.isShowCopmanyMaterialAddForm = false;
        //重新查询物料类型名称
        this.setMaterialTypeList();
        //重新查询物料列表 
        this.setCompanyMaterialDataList();
      },
      //修改物料类型后的处理
      updateMaterialType: function () {
        this.isShowCopmanyMaterialAddForm = false;
        this.setCompanyMaterialDataList();
      },
      //获取物料类型
      setMaterialTypeList: function () {
        var self = this;
        return ajaxRequest("companyMaterialType/getAllCompanyMaterialTypeList").then(function (data) {
          self.materialTypeList = data;
          return data;
        })
      }
    },
    components: {
      CompanyMaterialTypeForm: CompanyMaterialTypeForm
    }
  });
</script>

<style>
  .companyMaterialTable {
    height: calc(100% - 20px);
    overflow: auto;
    padding: 10px 20px;
  }

  .companyMaterialTable .companyMaterialQuery {
    display: flex;
    flex-direction: column;
    overflow: auto;
  }

  .companyMaterialTable .companyMaterialTableDiv {
    flex: 1;
    overflow: auto;
  }
</style>

</html>